<template>
    <div class="detail">
        <!--搜索header-->
        <div class="header_goods">
            <img @click="goBack()" class="back" src="../../assets/img/goods/back.png" alt="">
        </div>
        <!--轮播-->
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="pic in product.images"><img :src="imageDomain+pic" alt=""></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <div class="module1">
            <p class="goods_title">{{product.name}}</p>
            <p class="goods_info"><span>快递：{{product.freight}}</span><span class="fr">{{product.place}}</span></p>
        </div>
        <div class="module2">
            <p @click="showSelect()">选择尺寸、颜色分类 <img src="../../assets/img/goods/arrow.png" alt="" class="fr" ></p>
            <p @click="showParams()">产品参数<img src="../../assets/img/goods/arrow.png" alt="" class="fr" ></p>
        </div>
        <!--选择尺寸-->
        <mt-popup v-model="isSelect" position="bottom" style="width: 100%">
            <div class="select">
                <div class="select_header">
                    <img class="goods_icon" :src="imageDomain+product.images[1]" alt="">
                    <p class="price">￥{{price}}</p>
                    <p class="p1" v-if="selected_specification">已选：{{selected_specification.color}}/{{selected_specification.size}}</p>
                    <p class="p1" v-if="!selected_specification">请选择规格</p>
                    <img class="close" src="../../assets/img/close.png" alt="" @click="close()">
                </div>
                <ul class="item_select horizontal-list clear">
                    <p>规格</p>
                    <li v-for="specification in product.specifications" @click="selectItem(specification)" :class="{'activate': specification.id === selected_specification.id }">{{specification.color}} {{specification.size}}
                    </li>
                </ul>
              <div class="count clear">
                <span style="display: inline-block;line-height: 31px">购买数量</span>
                <span class="count_value">
                          <span><img @click="changeCount(0)" src="../../assets/img/goods/minus.png" alt=""></span><input type="text" disabled :value="goodCount" style="background: #fff"><span><img
                  @click="changeCount(1)" src="../../assets/img/goods/add.png" alt=""></span>
                      </span>
              </div>
                <div class="buy" @click="buyNow()">
                    立即购买
                </div>
            </div>
        </mt-popup>
        <!--产品参数-->
        <mt-popup v-model="isParams" position="bottom" style="width: 100%">
            <div class="select">
                <div class="params_header">产品参数</div>
                <ul class="params_list vertical-list clear">
                   <!-- <li><span class="item_title">产地</span><span class="item_info">{{product.place}}</span></li>
                    <li><span class="item_title">价格区间</span><span class="item_info">{{product.priceRange}}元</span></li>-->
                    <li><span class="item_title">颜色</span><span class="item_info"><label v-for="specification in product.specifications">{{specification.color}}&nbsp;&nbsp;</label></span></li>
                    <li><span class="item_title">大小</span><span class="item_info"><label v-for="specification in product.specifications">{{specification.size}}&nbsp;&nbsp;</label></span></li>
                </ul>
                <div class="buy" @click="close()">
                    完成
                </div>
            </div>
        </mt-popup>
        <!--商铺信息-->
        <div class="shop_info">
            <div class="shop_t">
                <router-link :to="{path:'/shop',query:{shopId:product.shop.id}}">
                <img src="../../assets/img/goods/shop_icon.png" alt="">
                {{product.shop.name}}</router-link>
            </div>
            <div class="shop_s">
                <span>商品描述：<span>{{shopRate.descScore}}</span>分</span>
                <span>服务态度：<span>{{shopRate.expressScore}}</span>分</span>
                <span>物流服务：<span>{{shopRate.serveScore}}</span>分</span>
            </div>
        </div>
        <!--详情评论-->
        <ul class="comment_menu horizontal-list clear">
            <!-- <li class="active">详情</li> -->
            <li :class="{active:choose_detail_tag == 1}" @click="choose_detail(1)">详情</li>
            <li :class='{active:choose_detail_tag == 2}' @click="choose_detail(2)">评论</li>
        </ul>
         <mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="allLoaded" @bottom-status-change="handleTopChange"
                     ref="loadmore">
        <ul v-if="choose_detail_tag==2" class="comment_content vertical-list">
            
            <li v-for="comment in commentList">
                <img class="user_img" src="../../assets/img/user/test-head.png" alt=""><span v-if='comment.isTor'><span
                    class="user_name" v-if="comment.name==null">{{comment.name.substr(0,1)}}***{{comment.name.substr(comment.name.length)}}</span><span
                    class="user_name" v-else>{{(comment.mobile+'').substr(0,3)}}***{{(comment.mobile+'').substr(8)}}</span></span>
                    <span v-else><span
                    class="user_name" v-if="comment.name==null">{{comment.name}}</span><span
                    class="user_name" v-else>{{comment.mobile}}</span></span>
                    <span class="user_time">{{(comment.createdAt).split('T')[0]}} &nbsp; {{comment.createdAt.split('T')[1].split('.')[0]}}</span>
                <p class="comment_text">{{comment.desc}}</p>
                <ul class="comment_images horizontal-list clear" v-if='comment.screenShot'>
                    <li v-for="image in comment.screenShot.split(',')"><img :src="testYbAppraiserDomin+image" alt="" ></li>
                </ul>
            </li>
        </ul>
         <div slot="bottom" class="mint-loadmore-bottom">
                <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↑</span>
                <span v-show="topStatus === 'loading'">Loading...</span>
            </div>
         </mt-loadmore>
        <div v-if="choose_detail_tag == 1" class="comment_detail" v-html="product.detail">
        </div>
        <!--goods_footer-->
        <ul class="goods_footer horizontal-list clear">
            <li><router-link :to="{path:'/shop',query:{shopId:product.shop.id}}"><img src="../../assets/img/goods/shop_f.png" alt=""></router-link></li>
            <li>
                <img src="../../assets/img/goods/cancel_collection.png" alt=""  v-if="product.collectionFlag == 1" @click="cancelColletion()">
                <img src="../../assets/img/goods/collection_f.png" alt="" @click="addCollection()" v-else>
            </li>
            <!--<li><img src="../../assets/img/goods/kf_f.png" alt=""></li>-->
            <li class="buy_now fr" @click="buyNow()">立即购买</li>
        </ul>
    </div>
</template>

<style>
    @import url("./detail.css");
    @import url('../../assets/css/swiper.css');

    .activate {
        border: 1px solid #D2691E
    }
</style>
<script>
    import {Toast} from 'mint-ui';
    import API from '../../assets/js/API'
    import Layer from '../../assets/js/MessageBox'

    export default {
        data() {
            return {
                productId: this.$route.query.productId,
                product: {
                    comments: [],
                    code: "",
                    name: "",
                    shop: {image: "", productScore: "", code: "", logisticsScore: "", serviceScore: "", name: ""},
                    freight: "",
                    images: [],
                    specifications: []
                },
                selected_specification: "",
                choose_detail_tag: 1,
                imageDomain: API.imageDomain,
                isSelect: false,//选择尺寸弹窗开关
                isParams: false,//产品参数弹窗开关
                goodCount: 1, //购买数量,
                price:0,
                shopRate:{},
                pageNum:1,
                testYbAppraiserDomin:API.testYbAppraiserDomin,
                commentList:[],
                allLoaded:false,
                topStatus:'',
            }
        },
        created() {
            //所有分类
             window.scrollTo(0,0);
            this.menu()
            let url = API.serviceDomain + API.prodctDetail+'/'+this.productId;
            this.$http.get(url).then(
                (res) => {
                    if (res.body.status == '000000') {
                        this.product = res.body.data;
                        this.price = this.product.specifications[0].price;
                        setTimeout(function () {
                            var mySwiper = new Swiper('.swiper-container', {
                                autoplay: 2500,//可选选项，自动滑动
                                autoplayDisableOnInteraction: false,
                                loop: true,
                                pagination: '.swiper-pagination',
                            });
                        },1000);
                        this.getShopRate()
                    } else {
                        Layer.showMsg(res.body.message);
                    }
                },
                (error) => {
                    return
                }
            )
             this.getEvaluateList()
        },
        mounted() {

        },
        methods: {
            menu() {
                window.scrollTo(0,0);
                },
            goBack() {
                this.$router.goBack()
            },
            checkMenu(index) {
                this.menuIndex = index;
            },
            getShopRate(){
                let url=API.evaluate+API.evaluateShopRate
                let form=new FormData();
                form.append('shopId',this.product.shop.id)
                this.$http.post(url,form,{
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(
                    (res)=>{
                        if(res.body.code==1){
                            this.shopRate=res.body.data
                        }else{
                             Layer.showMsg(res.body.error)
                        }
                       
                    },(err)=>{
                         Layer.showMsg("服务器开小差了...")
                            return
                    }
                )
            },
            getEvaluateList(){
                let url=API.evaluate+API.evaluateList;
                let form=new FormData()
                form.append('gId',this.productId+'')
                 form.append('page',this.pageNum)
                this.$http.post(url,form,{
                     headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(
                    (res)=>{
                        if(res.body.code==1){
                            this.commentList=res.body.data
                        }else{
                             Layer.showMsg("获取评价列表失败！")
                        }
                    },
                    (err)=>{
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            showSelect() {
                this.isSelect = true
            },
            showParams() {
                this.isParams = true
            },
            choose_detail(type) {
                this.choose_detail_tag = type
            },
            changeCount(type) {
                if (type == 0) {
                    if (this.goodCount > 1) {
                        this.goodCount--;
                    }
                } else {
                    this.goodCount++;
                }
            },
            close() {
                this.isSelect = false;
                this.isParams = false;
            },
            selectItem(specification) {
                this.goodCount = 1;
                this.selected_specification = specification;
            },
            buyNow() {
                this.imageDomain = API.imageDomain;
                let token = localStorage.getItem('token');
                if (!token) {
                    Layer.showMsg("您还未登录!");
                    this.$router.push({path:'/login',query:{'backUrl':'/detail?productId='+this.productId}})
                    return
                }
                if(!this.selected_specification){
                    this.showSelect();
                    return;
                }
                let url = API.serviceDomain + API.orderByQuick;
                this.$http.post(url, {itemId:this.selected_specification.id,quantity:this.goodCount}).then(
                    (res) => {
                        console.log(res);
                        if (res.body.status == '000000') {
                            this.$router.push({path:'/confirm',query:{itemId:this.selected_specification.id,goodCount:this.goodCount}})
                        } else {
                            Layer.showMsg(res.body.message);
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            addCollection(){
                let token = localStorage.getItem('token');
                if (token) {
                    //所有分类
                    let url = API.serviceDomain + API.collectionProduct + '/' + this.productId;
                    this.$http.post(url).then(
                        (res) => {
                            if (res.body.status == '000000') {
                                Layer.showMsg("收藏成功");
                                this.product.collectionFlag = 1;
                            } else {
                                Layer.showMsg(res.body.message);
                            }
                        },
                        (error) => {
                            Layer.showMsg("服务器开小差了...")
                            return
                        }
                    )
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/detail?productId='+this.$route.query.productId}})
                }
            },
            cancelColletion(){
                let token = localStorage.getItem('token');
                if (token) {
                    //所有分类
                    let url = API.serviceDomain + API.collectionDelProduct + '/' + this.productId;
                    console.log(url);
                    this.$http.post(url).then(
                        (res) => {
                            if (res.body.status == '000000') {
                                Layer.showMsg("取消成功");
                                this.product.collectionFlag = 0;
                            } else {
                                Layer.showMsg(res.body.message);
                            }
                        },
                        (error) => {
                            Layer.showMsg("服务器开小差了...")
                            return
                        }
                    )
                }else{
                    this.$router.push({path:'/login',query:{'backUrl':'/detail?productId='+this.$route.query.productId}})
                }
            },
            loadTop() {
                // 加载更多数据
                this.switch(this.menuIndex + '');
                this.resetIndex();
                this.$refs.loadmore.onTopLoaded();
            },
            loadBottom() {
                // 加载更多数据
                this.addRecord(this.menuIndex + '');
                this.$refs.loadmore.onBottomLoaded();
            },
            handleTopChange(status) {
                this.topStatus = status;
            },
            nextIndex() {
                this.pageNum = this.pageNum + 1;
            },
            resetIndex() {
                this.pageNum = 1;
            },
             addRecord() {
                  let url=API.evaluate+API.evaluateList;
                   this.nextIndex() 
                let form=new FormData()
                form.append('gId',this.productId+'')
                 form.append('page',this.pageNum)
                this.$http.post(url,form,{
                     headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                }).then(
                    (res)=>{
                        if(res.body.code==1){
                            if(res.body.data){
                                this.allLoaded = true;
                            }else{
                                this.commentList= this.commentList.concat(res.body.data)
                            }
                            
                        }else{  
                             Layer.showMsg("获取评价列表失败！")
                        }
                    },
                    (err)=>{
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
        }
    }
</script>
